import React, { Component } from 'react';
import './index.scss'
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'
BScroll.use(ObserveImage)
BScroll.use(ObserveDOM)
class Index extends Component {
  state = {
    tabIndex: 0,
    pos: []
  }

  handleClock(i) {
    this.setState({
      tabIndex: i
    })
    const nodeH3 = this.content.querySelectorAll('h3')[i]
    // 滚动到指定的目标元素。
    // 参数1 滚动到的目标元素
    // 参数2 滚动时间
    this.bs.scrollToElement(nodeH3, 2000)
  }
  componentDidMount() {
    this.initBScroll();
  }
  componentDidUpdate(prevProps) {
    /**
     * 1. 因为最开始list父组件传递 props, 最开始的时候是一个空数组 子组件 挂载阶段 声明周期开始行了
     * 
     * 2. 当 父组件调用接口数据  再一次更新props  这个时候会触发更新阶段声明周期  
     * 
     * 3  componentDidUpdate  这个使用this.setState 必须有条件判断
     * 
     * */ 
    if(prevProps.list.length !== this.props.list.length) {
      const pos = [...this.content.querySelectorAll('.list-item')].map(item => item.offsetTop)
      this.setState({
        pos
      })
    }
  }
  initBScroll() {
    this.bs = new BScroll(this.content, {
      observeDOM: true, // 开启 observe-dom 插件
      observeImage: true,// 开启 observe-image 插件
      probeType: 3
    })
  
    // 滚动事件
    this.bs.on('scroll', (position) => {
      // 方式2
      
      const { pos } = this.state
      const y = Math.abs(position.y)
      pos.forEach((v, i) => {
        if(y > v &&  y < pos[i + 1]) {
          this.setState({
            tabIndex: i
          })
        }
      })

      // 方式1
      // const listPos = [...this.content.querySelectorAll('.list-item')].map(item => {
      //   return item.getBoundingClientRect()
      // })
      // listPos.forEach((v, i) => {
      //   if(v.top <= 200 && v.bottom > 200) {
      //     this.setState({
      //       tabIndex: i
      //     })
      //   }
      // })
    })
  }
  render() {
    const { list } = this.props;
    const { tabIndex } = this.state;
    return (
      <div className="tab">
        <div className="title">
          {
            list.map((v, i) => {
              return (
                <b key={v.id} className={tabIndex === i ? 'active' : ''} onClick={() => this.handleClock(i)}>{v.title}</b>
              )
            })
          }
        </div>
        {/* ref 回调函数写法  this.content 代表节点 */}
        {/* ref={ (ref) => this.content = ref  } */}
        <div className="content" ref={(ref) => this.content = ref}>
          <div className="btter-scroll-box">
            {
              list.map((v, i) => {
                return (
                  <div className="list-item" key={i}>
                    <h3>{v.title}</h3>
                    <div className="item">
                      {
                        v.children.map((item, index) => {
                          return (
                            <dl key={index}>
                              <dt>
                                <img src={item.url} alt="" />
                              </dt>
                              <dd>
                                <h4>{item.name}</h4>
                                <p>{item.desc}</p>
                              </dd>
                            </dl>
                          )
                        })
                      }
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default Index;
